<template>
  <div>

	<myheader></myheader>

	<br /><br />

			<!--面包屑导航-->
			<Breadcrumb :datas="datas" ></Breadcrumb>

	

	<section class="featured-block text-center">
		<div class="container">
			<!-- <div v-width="300"><AutoComplete :option="param" v-model="value" @change="onChange" type="title"></AutoComplete></div>			 -->


			<div v-for="item in goodslist" class="col-sm-6 col-md-3 col-product">
				<figure>
					<a :href="'/item?id='+item.id"><img class="rounded-corners img-fluid" :src="'http://localhost:8000/static/upload/'+item.img+''"	width="240" height="240">
					</a>
					<figcaption>
						<div class="thumb-overlay"><a :href="'/item?id='+item.id" title="More Info">
							<i class="fas fa-search-plus"></i>
						</a></div>
					</figcaption>
				</figure>
				<h4><a target="black" :href="'/item?id='+item.id">{{ item.name }}</a></h4>
				<p><span class="emphasis">${{ item.price }}</span></p>
			</div>
			
			

		</div>
	</section>
	

	
	
	
	<footer class="footer">

		<div class="container">
			@v3u.cn
		</div>
		
		
	</footer>
    
  </div>
  
</template>


 
<script>

//导包
import myheader from './myheader.vue';
// import jsonp from 'fetch-jsonp';

// const loadData = function (filter, callback) {
//   // this 为 option 配置
//   // this.orgId 使用传递的参数获取数据，例：搜索某公司下的员工
//   jsonp(`https://suggest.taobao.com/sug?code=utf-8&q=${filter}`)
//     .then(response => response.json())
//     .then((d) => {
//       callback(d.result.map((r) => {
//         return r[0];
//       }));
//     });
// };



export default {
  data () {
    return {
      //声明面包屑变量
	  datas:[{title:'首页',route:{name:'index'}},{title:'商品检索'}],
	  word:'',
	  goodslist:[],
	//   //   智能提示控件
	//   value: '',
    //   param: {
    //     orgId: 1, // 自定义参数传递
    //     loadData,
    //     minWord: 1
    //   }
    };
    
  },
  //注册组件标签
  components:{

  		'myheader':myheader

  },

//    监听属性
// watch:{

// 	$route(to,from){
// 		// 刷新页面
// 		this.$route.go(0);
// 	}

// },
  mounted:function(){
	//   接收参数
	var word = this.$route.query.word;
	// 赋值
	this.word = word;

	
	
	console.log(this.word);
	if(this.word != ""){

		this.axios.get('http://localhost:8000/search/',{params:{word:this.word}}).then((result) =>{
// this.search_list.length == 0
			// 赋值
			this.goodslist = result.data;

			
			

		  });

	}else{
		this.$Message("请输入要搜索的商品")
	}
	




   
  
},

  methods:{

	//   关键词并更
    onChange(data, trigger) {
      	console.log(data, trigger);
    }


     
  }
}


</script>
 
<style>



</style>